<template>
    <!-- 网格布局容器 -->
    <div class="container">
        <div class="container-item container-item-zero">
            <div>
                <timeChart></timeChart>
            </div>
            <div>
                <temperature></temperature>
            </div>
        </div>
        <div class="container-item container-item-one">
            <div class="container-item-secondContainer">
                <!-- 区域一 -->
                <div class="container-item-secondContainer-one-item" style="background:#ffffff;">
                    <areaOne></areaOne>
                </div>
                <!-- 区域四 -->
                <div class="container-item-secondContainer-one-item" style="background:#ffffff;">
                    <areaFour></areaFour>
                </div>
            </div>
            <div class="container-item-secondContainer">
                <div class="container-item-secondContainer-thridContainer">
                    <!-- 第二块区域 -->
                    <div style="background:#ffffff;">
                        <areaTwo></areaTwo>
                    </div>
                    <!-- 第三块区域 -->
                    <div style="background:#ffffff;">
                        <areaThree></areaThree>
                    </div>
                </div>
                <!-- 第五块区域 -->
                <div style="background:#ffffff;">
                    <areaFive></areaFive>
                </div>
            </div>
            <!-- 第六块区域 -->
            <div style="background:#ffffff;">
                <areaSix></areaSix>
            </div>
        </div>
        <div class="container-item container-item-two">
            <!-- echarts饼状图 -->
            <div class="container-item-pie">
                <div id="piechart" style="height: 200px;">

                </div>
            </div>
            <div class="container-item-line">
                <div id="linechart" style="height: 200px;">

                </div>
            </div>
        </div>
        <div class="container-item container-item-three">
            <column></column>
        </div>
    </div>
</template>

<script>
// echarts按需引入
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent, TitleComponent, GridComponent } from 'echarts/components';
import { PieChart, LineChart } from 'echarts/charts';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import areaOne from './components/areaOne.vue';
import areaTwo from './components/areaTwo.vue';
import areaThree from './components/areaThree.vue';
import areaFour from './components/areaFour.vue';
import areaFive from './components/areaFive.vue';
import areaSix from './components/areaSix.vue';
import column from './components/column.vue';
import timeChart from './components/timeChart.vue';
import temperature from './components/temperature.vue';
import { onMounted, reactive } from 'vue';
import getApi from '@/api/getApi';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition, TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout, TitleComponent]);
export default {
    components: {
        areaOne,
        areaTwo,
        areaThree,
        areaFour,
        areaFive,
        areaSix,
        column,
        timeChart,
        temperature
    },
    setup() {
        const state = reactive({
            pieData: [],
            data: [
                {
                    name: '南区',
                    value: 3000
                }
            ]
        })
        // 生命周期函数
        onMounted(() => {
            lineChart()
            getHouseNumber()
        })
        // 根据存储名读取浏览器cookies中的本地缓存
        const getCookie = (cname) => {   // 参数为存储名
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) return decodeURIComponent(c.substring(name.length, c.length));
            }
            return "";
        };
        // 获取各区域的房屋数
        const getHouseNumber = () => {
            let obj = {
                Authorization: getCookie('token')
            }
            getApi('/buildinghead/selectallregionbyproject', 'get', { projectId: "1" }, obj).then((res) => {
                let arr = []
                for (let i = 0; i < res.data.data.length; i++) {
                    getApi('/roomhead/getRoomCountByRegion', 'post', { region: res.data.data[i] }, obj).then((s) => {
                        arr.push({ name: res.data.data[i], value: s.data.data })
                    }).then(() => {
                        state.pieData = arr
                        pieChart()
                    })
                }
                // console.log(state.pie,123)
            }).then(() => {
                // console.log(5555)
                pieChart()
            })
        }
        // echarts空心饼状图(东理各区域房屋数量占比)
        const pieChart = () => {
            // echarts.use([
            //     TooltipComponent,
            //     LegendComponent,
            //     PieChart,
            //     CanvasRenderer,
            //     LabelLayout,
            //     TitleComponent
            // ]);
            if (document.getElementById('piechart') == null) {
                return
            }
            echarts.dispose(document.getElementById('piechart'))

            var chartDom = document.getElementById('piechart');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '东华理工各区域房屋数量',
                    left: 'center',
                    top: '2%'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    top: '20%',
                    left: '10%'
                },
                series: [
                    {
                        name: '东理物业房屋区域占比',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['66%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 10,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: state.pieData
                    }
                ]
            };

            option && myChart.setOption(option);

        }
        // echarts折线图
        const lineChart = () => {
            if (document.getElementById('linechart') == null) {
                return
            }
            echarts.dispose(document.getElementById('linechart'))
            // echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

            var chartDomLine = document.getElementById('linechart');
            var myChart = echarts.init(chartDomLine);
            var option;

            option = {
                title: {
                    text: '东华理工房屋入住情况',
                    left: 'center',
                    top: '2%'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                },
                yAxis: {
                    min: 200,
                    max: 0,
                    interval: 50,
                    type: 'value',
                    axisLine: {
                        show: true
                    }
                },
                grid: {
                    show: true,
                    top: 60,
                    left: 50,
                    right: 30,
                    height: 120,
                },

                series: [
                    {
                        left: 0,
                        stack: 'Total',
                        data: [55, 98, 64, 80, 160, 85, 40],
                        type: 'line',
                        itemStyle: { color: ['#1CD8A8'] },// 数值点的颜色  
                        lineStyle: { width: 2, color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#2FAEF2' }, { offset: 1, color: '#1CD8A8' }]) }, // 线条渐变 
                        areaStyle: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: '#dcf1ea6d' }, { offset: 0.5, color: 'rgba(28,216,168,0.52)' }, { offset: 1, color: 'rgba(28,216,168,0.52)' }]) }, // 线条区域渐变 
                    }
                ],

            };

            option && myChart.setOption(option);
        }

        return {}
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 14px;

    // color: #dcf1ea6d;
    .container-item {
        width: 100%;
    }

    .container-item-one {
        height: 360px;
        display: grid;
        grid-template-columns: 1fr 2.2fr 1.1fr;
        grid-column-gap: 14px;

        .container-item-secondContainer {
            display: grid;
            grid-template-rows: 1fr 2fr;
            grid-row-gap: 14px;

            .container-item-secondContainer-thridContainer {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-column-gap: 14px;
            }
        }
    }

    .container-item-two {
        height: 200px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-column-gap: 14px;

        .container-item-pie {
            background-color: #ffffff;
        }

        .container-item-line {
            background-color: #ffffff;
        }
    }
    .container-item-three{
        height: 200px;
        width: 100%;
        background-color: #ffffff;
    }
    .container-item-zero{
        height: 100px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 200px;
    }
}
</style>